import Vue from 'vue';
import Router from 'vue-router';
import VueCookies from 'vue-cookies';
import Rule from '@/page/Rule';
import Game from '@/page/Game';
import Index from '@/page/Index';
import User from '@/page/user.vue';
import About from '@/page/About';
import NewHall from '@/page/NewHall';
import NotFound from '@/page/NotFound';

Vue.use(Router);
Vue.use(VueCookies);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index,
      meta: {title: '新中国象棋'}
    },
    {
      path: '/user/login',
      name: 'login',
      component: User,
      meta: {
        title: '用户登录',
        form: 'login'
      }
    },
    {
      path: '/user/register',
      name: 'register',
      component: User,
      meta: {
        title: '用户注册',
        form: 'register'
      }
    },
    {
      path: '/hall',
      name: 'hall',
      component: NewHall,
      meta: {title: '游戏大厅'}
    },
    {
      path: '/game',
      name: 'game',
      component: Game,
      meta: {title: '游戏房间中'},
      beforeRouteLeave(to, from, next) {
        const answer = window.confirm('Do you really want to leave? The game is not over yet!');
        if (answer) {
          next();
        }
        else {
          next(false);
        }
      }
    },
    {
      path: '/rule',
      name: 'rule',
      component: Rule,
      meta: {title: '游戏规则'}
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      meta: {title: '更多'}
    },
    {
      path: '*',
      name: 'NotFound',
      component: NotFound,
      meta: {title: '未知页面'}
    }
  ],
  mode: 'history'
});

router.beforeEach((to, from, next) => { // 路由发生变化修改页面title
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next();
});

export default router;
